import store from "../store";
import { MessageBox, Message } from "element-ui";
import rightClick from "../assets/css/rightClick.css"
import { getAddCustomPolygon, getRegion } from "../api/connect"

const clickRight = async () => {
  console.log("点击了右键");
  // 判断是否是绘制时的右键点击，防止只要右键就出提示框
  console.log(store.state.Sjsx.openPolygonDraw, "判断是否是绘制时的右键点击")
  if (store.state.Sjsx.openPolygonDraw) {  // 如果是绘制时点击的右键，则执行以下操作(即openPolygonDraw的值为true时)
    MessageBox.confirm('此操作将会完成绘制，是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      store.dispatch("Sjsx/setDrawLoading_act", true)   // 当右键后点击了确定时，开启绘制的loading                  
      let res = await __g.editHelper.finish(true);
      let oldCoordinates = res.coordinates;
      console.log("%c 自定义画完面后获取到的res的坐标值", "color:green", res.coordinates);
      // 在这里对获取到的res进行后端操作
      let newCoordinates = [];
      oldCoordinates.forEach(item => {
        console.log(item, "oldCoordinates循环");
        let a = item.join()  //将数组转为字符串
        console.log(a, "a的值");
        a = a.replaceAll(",", " ")  // 将字符串中的，转为空格
        console.log(a, "a替换后的值");
        // const c = a.split("\\s+");  // 根据空格转为数组
        // console.log(c,"c的值");
        newCoordinates.push(a)
      });
      console.log(oldCoordinates, "更新前的值");
      console.log(newCoordinates, "更新完后的值");

      try {
        const result = await getAddCustomPolygon(newCoordinates);
        if (result.code === 200) {
          store.dispatch("Sjsx/setFileList_act",[])
          // 如果用户点击的是绘制，且绘制成功，则将radio的值设置为1，即让多边形绘制的radio点亮
          store.dispatch("Sjsx/setRadioChoise_act", 1)
          // 当用户点击的是绘制，且绘制成功时，传false给后端来判断是使用了绘制功能的
          store.dispatch("Sjsx/setIsRegion_act", false)

          // console.log("200");
          // alert(200)   
          // 上传完毕后，请求数据之前清除右侧的东西
          // 清空vuex数据

          // store.dispatch("Sjsx/setIsDrawRegion_act", true)

          store.dispatch("Sjsx/setResultData_act", null);
          store.dispatch("Sjsx/setunit_act", null);
          store.dispatch("Sjsx/setAreaData_act", null);
          store.dispatch("Sjsx/setTDresulrData_act", null);
          store.dispatch("Sjsx/setYjjbntData_act", null);
          store.dispatch("Sjsx/setWdlygdData_act", null);
          store.dispatch("Sjsx/setyjsyData_act", null);
          store.dispatch("Sjsx/settdcrData_act", null);
          store.dispatch("Sjsx/setjzData_act", null);
          store.dispatch("Sjsx/setCunluoData_act", null);
          store.dispatch("Sjsx/setTdscData_act", null);
          store.dispatch("Sjsx/setHdsqData_act",null);
          store.dispatch("Sjsx/setGtkjghData_act", null);
          store.dispatch("Sjsx/setTdlyztghAData_act", null);
          store.dispatch("Sjsx/setTdlyztghBData_act", null);
          store.dispatch("Sjsx/setTuliData_act", null); // 清除图例

          console.log(result, "自定义画面后接口的值");
          store.dispatch("Sjsx/setPolygonDrawing_act", res);
          const result2 = await getRegion(false);
          console.log(result2, "获取绘制面积的值");
          const polylinedata = [];
          result2.data.map((pro, index) => {
            let resultdata = JSON.parse(pro.st_asgeojson);
            resultdata.geometry.coordinates.forEach((item) => {
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_3" + index,
                    groupId :'line3',
                    coordinates: mon, //构成折线的坐标点数组
                    color: [0, 1, 1, 1], //折线颜色
                    style: 5, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 20, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_4" + index,
                    groupId :'line4',
                    coordinates: mon, //构成折线的坐标点数组
                    color: [0, 1, 1, 1], //折线颜色
                    style: 5, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 3, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_3" + index,
                  groupId :'line3',
                  coordinates: item, //构成折线的坐标点数组
                  color: [0, 1, 1, 1], //折线颜色
                  style: 5, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 20, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
                polylinedata.push({
                  id: "polyline_4" + index,
                  groupId :'line4',
                  coordinates: item, //构成折线的坐标点数组
                  color: [0, 1, 1, 1], //折线颜色
                  style: 5, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 3, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
            console.log(polylinedata, "polylinedatapolylinedata");
            // let o = {
            //   id: "polygon" + index,
            //   coordinates: resultdata.geometry.coordinates[0][0],
            //   color: Color.Red, //折线颜色
            //   style: PolylineStyle.Arrow, //折线样式 参考样式枚举：PolylineStyle
            //   thickness: 150, //折线宽度
            //   intensity: 0.8, //亮度
            //   flowRate: 0.5, //流速
            //   tiling: 0, //材质贴图平铺比例
            //   shape: 0, //折线类型 0：直线， 1：曲线
            //   depthTest: false, //是否做深度检测
            // };
            // return o;
          });
          await window.__g.polygon3d.clear();
          await window.__g.polyline.clear();
          await window.__g.marker.clear();
          await window.__g.polygon.clear();
          await window.__g.highlightArea.clear();
          await window.__g.polyline.add(polylinedata);
          await window.__g.polyline.focus(polylinedata.map((r) => r.id));

          store.dispatch('Sjsx/setIsRegion_act', false)  // 添加绘制成功后，即为绘制的面积，将isRegion的值设置为false
          
          // switch (res.buildType) {
          //     case 0: {
          //         __g.polyline.add({
          //             id: Math.random(),
          //             coordinates: res.coordinates,
          //             color: Color.Red,
          //             style: 2,
          //             thickness: 10,
          //             intensity: 1,
          //             flowRate: 0.5,
          //             depthTest: false
          //         });
          //     } break;
          //     case 1: {
          //         __g.polygon.add({
          //             id: Math.random(),
          //             color: Color.Blue,
          //             coordinates: res.coordinates,
          //             frameColor: Color.Red,
          //             frameThickness: 1,
          //             depthTest: false,
          //             style:10
          //         });
          //     } break;
          // }
          Message({
            type: 'success',
            message: '多边形绘制成功！'
          });
          store.dispatch("Sjsx/setDrawLoading_act", false)   // 绘制成功后，将loading窗关闭
          store.dispatch('Sjsx/setOpenPolygonDraw_act', false)  // 添加绘制成功后，将右击出现弹窗的操作隐藏
        } else if (result.code === 500) {
          // console.log("500");
          // alert(500)
          if (result.msg === 'Index 0 out of bounds for length 0') {
            Message({
              type: 'warning',
              message: '所画区域面积不能为空！',
            })
            __g.editHelper.cancel();
            store.dispatch("Sjsx/setDrawLoading_act", false)   // 绘制失败后，将loading窗关闭
            store.dispatch('Sjsx/setOpenPolygonDraw_act', false)
          }
          else {
            Message({
              type: 'error',
              message: '服务器请求错误',
            })
            __g.editHelper.cancel();
            store.dispatch("Sjsx/setDrawLoading_act", false)   // 绘制失败后，将loading窗关闭
            store.dispatch('Sjsx/setOpenPolygonDraw_act', false)
          }
        }
      } catch (error) {
        // 服务器请求错误时
        Message({
          type: 'error',
          message: '服务器请求异常，图层绘制失败！',
        })
        __g.editHelper.cancel();
        store.dispatch("Sjsx/setDrawLoading_act", false)   // 绘制失败后，将loading窗关闭
        store.dispatch('Sjsx/setOpenPolygonDraw_act', false)
      }

    }).catch(() => {
      // 点击取消时，调用取消绘制的接口，并将右击后出现弹窗的操作隐藏
      __g.editHelper.cancel();
      Message({
        type: 'info',
        message: '已取消绘制',
      })
      store.dispatch('Sjsx/setOpenPolygonDraw_act', false)
    })
  }
  // let res = await __g.editHelper.finish(true);

  // console.log(res,"res");
  // store.dispatch("Sjsx/setPolygonDrawing_act", res);
  // switch (res.buildType) {
  //     case 0: {
  //         __g.polyline.add({
  //             id: Math.random(),
  //             coordinates: res.coordinates,
  //             color: Color.Red,
  //             style: 2,
  //             thickness: 10,
  //             intensity: 1,
  //             flowRate: 0.5,
  //             depthTest: false
  //         });
  //     } break;

  //     case 1: {
  //         __g.polygon.add({
  //             id: Math.random(),
  //             color: Color.Blue,
  //             coordinates: res.coordinates,
  //             frameColor: Color.Red,
  //             frameThickness: 1,
  //             depthTest: false,
  //             style:10
  //         });
  //     } break;
  // }
};
export default clickRight;